<template>
    <div class="flex-colum">
<!--      <el-date-picker v-model="startTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                      type="datetime" placeholder="开始日期" @change="calcResult(0)"-->
<!--                      style="width: 200px" :clearable="true">-->
<!--      </el-date-picker>-->
<!--      <el-input v-model="interval" @change="calcResult(1)"-->
<!--                @input="value=>interval=value.replace(/[^\d]/g,'')" style="width: 130px;margin: 0 10px"-->
<!--                placeholder="请输入">-->
<!--        <template slot="append">天</template>-->
<!--      </el-input>-->
<!--      <el-date-picker v-model="endTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                      type="datetime" placeholder="结束日期" @change="calcResult(2)"-->
<!--                      style="width: 200px" :clearable="true" :picker-options="pickerOptions()">-->
<!--      </el-date-picker>-->
      <uni-forms-item labelWidth="100" label="租赁开始时间" required class="form-item">
        <uni-datetime-picker v-model="startTime" type="datetime" :clearIcon="false"
                             @change="calcResult(0, $event)" />
      </uni-forms-item>

      <uni-forms-item labelWidth="100" label="租赁间隔(天)" required class="form-item">
        <u--input v-model="interval" placeholder="请输入" type="number" @change="inputChange(1, $event)"></u--input>
      </uni-forms-item>

      <uni-forms-item labelWidth="100" label="租赁结束时间" required class="form-item">
        <uni-datetime-picker v-model="endTime" type="datetime" :clearIcon="false" :start="startTime"
                             @change="calcResult(2, $event)" />
      </uni-forms-item>


    </div>
</template>

<script>
var moment = require('@/utils/moment.js');
import {getFreeHour} from '@/api/order-api.js'
export default {
  name: 'timepicker',
  props: {
    //数组 [开始时间，结束时间，时间间隔(可不传)]
    value:{
      type:Array,
      default:()=>([])
    }
  },
  data(){
    return {
      startTime:null,
      endTime:null,
      interval:null,
      freeHour:0
    }
  },
  watch:{
    value:{
      deep:true,
      immediate:true,
      handler(val){
        if(val && Array.isArray(val) && val.length>1){
          this.startTime = val[0];
          this.endTime = val[1];
          if(val.length===3){
            this.interval = val[2];
          }else {
            //自己算间隔几天
            this.calcInterVal();
          }
        }
      }
    }
  },
  created() {
    getFreeHour().then(res=>{
      this.freeHour = res.data||0;
    }).catch(e=>{
      this.freeHour = 4
    })
  },
  methods: {
    pickerOptions(){
      let that = this
      return {
        disabledDate(time) {
          return that.endTime ? time.getTime() <= moment(that.startTime).valueOf() : false;
        }
      }
    },
    calcResult(type, e){
      console.log('calc')

      //计算规则，开始时间-->时间间隔-->结束时间
      if(0===type){
        this.startTime = e
        if(this.startTime){
          if(this.interval){
            this.calcEndTime();
          }else if(this.endTime){
            this.calcInterVal();
          }
        }
      }else if(1===type){
        this.interval = e
        if(this.interval){
          if(this.startTime){
            this.calcEndTime();
          }else if(this.endTime){
            this.calcStartTime();
          }
        }
      }else if(2===type){
        this.endTime = e
        if(this.endTime){
          if(this.startTime){
            this.calcInterVal();
          }else if(this.interval){
            this.calcStartTime();
          }
        }
      }

      console.log('aaa',this.startTime, this.endTime, this.interval, this.freeHour, type, e)

      this.$forceUpdate();

      this.$emit("input", [this.startTime, this.endTime, this.interval])
      this.$emit("change", [this.startTime, this.endTime, this.interval])
    },

    inputChange(type, e){
      uni.$u.debounce(()=>this.calcResult(type, e), 1000);
    },

    calcStartTime(){
      this.startTime = moment(this.endTime, "YYYY-MM-DD HH:mm:ss").subtract(this.interval, "days").format('YYYY-MM-DD HH:mm:ss')
    },

    calcEndTime(){
      this.endTime = moment(this.startTime, "YYYY-MM-DD HH:mm:ss").add(this.interval, "days").format('YYYY-MM-DD HH:mm:ss')
    },

    calcInterVal: function () {
      let hours = moment(this.endTime, "YYYY-MM-DD HH:mm:ss").diff(moment(this.startTime, "YYYY-MM-DD HH:mm:ss"), "second");
      this.interval = Math.ceil(Math.abs((hours-(this.freeHour*60*60))/24/60/60))
    }
  },
}
</script>

<style scoped>
.form-item{
  width: 100%;
}
</style>
